<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="vue.js">
    </script>
    <style>

    </style>
</head>

<body>
    <div id="pic">
        <img v-bind:src="imgs[index]" alt="tu">
        <div @click="left" v-if="leftif">left</div>
        <div @click="right" v-if="rightif">right</div>
    </div>
    <script>
        new Vue({
            el: "#pic",
            data: {
                index: 0,
                imgs: ["imgs/1.jpg", "imgs/2.jpg",
                    "imgs/3.png", "imgs/4.png",
                    "imgs/5.jpg", "imgs/6.png"
                ],
                leftif: false,
                rightif: true

            },
            methods: {
                left: function() {
                    if (this.index == 1) {
                        this.leftif = false;

                    }
                    this.index--;
                    this.rightif = true;

                },
                right: function() {
                    if (this.index == this.imgs.length - 2) {
                        this.rightif = false;

                    }
                    this.index++;
                    this.leftif = true;

                }
            }
        })
    </script>
</body>

</html>